<template>
	<view class="container">
		<button open-type="getUserProfile" @tap="getUserProfile">授权微信登录</button>

		<button @click="wxUserProfile" type="primary">获取头像昵称</button>

		<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">获取手机号</button>
		<!-- <view v-if="userInfo">
			<image :src="userInfo.avatarUrl" class="avatar"></image>
			<text>{{ userInfo.nickName }}</text>
		</view> -->
	</view>
</template>

<script>
export default {
	data() {
		return {
			userInfo: null // 用于存储用户信息
		};
	},
	methods: {
		getUserProfile() {
			// 调用微信小程序的 getUserProfile 接口
			uni.getUserProfile({
				desc: '用于完善用户资料', // 声明用途
				success: (res) => {
					console.log('用户信息获取成功', res);
					this.userInfo = res.userInfo; // 保存用户信息
				},
				fail: (err) => {
					console.error('用户信息获取失败', err);
				}
			});
		},
		wxUserProfile() {
			wx.getUserProfile({
				desc: '获取你的昵称、头像等信息',
				success(res) {
					console.log('用户信息:', res.userInfo);
					// wx.setStorageSync('userInfo', res.userInfo); // 存储用户信息
				},
				fail() {
					wx.showToast({
						title: '用户拒绝授权',
						icon: 'none'
					});
				}
			});
		},
		getPhoneNumber(e) {
			console.log(22222, e);
			if (e.detail.errMsg === 'getPhoneNumber:ok') {
				// wx.request({
				// 	url: 'http://服务器/wx/getPhone',
				// 	method: 'POST',
				// 	data: {
				// 		encryptedData: e.detail.encryptedData,
				// 		iv: e.detail.iv,
				// 		token: wx.getStorageSync('token') // 传递 token
				// 	},
				// 	success(res) {
				// 		console.log('手机号:', res.data.phone);
				// 	}
				// });
			} else {
				wx.showToast({
					title: '用户拒绝授权',
					icon: 'none'
				});
			}
		}
	}
};
</script>

<style scoped lang="scss">
.container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 100vh;
	width: 100%;
	background-color: #fff;
	position: relative;
	> button {
		background-color: #409e40;
		color: #fff;
		position: absolute;
		// bottom: 350rpx;
		padding: 0 !important;
		width: 60%;
		height: 80rpx;
		left: calc(50% - 30%);
	}
}
.avatar {
	width: 100px;
	height: 100px;
	border-radius: 50%;
	margin-bottom: 20px;
}
</style>
